<template>
	<view style="margin: 30rpx;">
		<view class="gui-flex gui-space-between gui-align-items-center gui-bg-white gui-padding-small">
			<view class="">
				<button type="default" size="mini" :class="action_type=='卡包'?'gui-bg-blue gui-color-white':''"
					@click="action_type='卡包'"> 卡包</button>
				<button type="default" size="mini" :class="action_type=='优惠券'?'gui-bg-blue gui-color-white':''"
					@click="action_type='优惠券'"> 优惠券</button>
			</view>
			<view class="flex-1 gui-flex gui-justify-content-center">
				<gui-datetime @confirm="confirm2" :value="dt_val" :isTime="false" height="500rpx" :isDay="false"
					:start-year='2018'>
					<text class="gui-block gui-icons">{{dt_val}} &#xe6d1;</text>
				</gui-datetime>
			</view>
			<!-- <view class="shenbao" v-for="(item, idx) in actionSheetItems">
				<view :class="action_type == item.id ? 'this_bg' : 'defu_bg'" @click="query_change(item)">
					{{item.name}}
				</view>
			</view> -->

			<button type="primary" size="mini" @click="get_coupon_log()">查询</button>
		</view>

		<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" :style="scrollStyle"> -->
		<view v-if="expenses_list.length <= 0" class="gui-color-gray" style="text-align: center; margin-top: 200rpx;">
			{{msg_text}}
		</view>
		<view v-else class="gui-bg-white gui-dark-bg-level-3" style="padding-left: 15rpx; padding-right: 40rpx;">

			<view class="gui-list-items" v-if="expenses_list && expenses_list.length > 0" v-for="(item,index) in expenses_list">
				<view class="gui-list-body gui-border-b" v-if="action_type =='优惠券'">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-text">{{item.coupon.name}}</text>
						<text class="gui-list-body-desc">核销地：{{item.business.addr}}</text>
					</view>
					<view class="gui-list-title">
						<text class="gui-list-title-desc gui-color-gray">{{item.updated_at}}</text>
						<text class="gui-list-body-desc">核销人：{{item.hx_member.name}}</text>
					</view>
				</view>
				<view v-if="action_type =='卡包'" style="width: 95%;" @click="info(item.id)">
					<!-- <view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-text">{{item.wallet_type}}</text>
					</view>
					<view class="gui-list-title" style="margin-top: 5rpx;">
						<text class="gui-list-title-desc gui-color-gray">{{item.pay_type}}</text>
						<text class="gui-list-title-desc gui-color-red">消费：{{item.wallet_pay}}</text>
					</view>
					<view class="gui-list-title" style="margin-top: 5rpx;">
						<text class="gui-list-body-desc gui-color-gray">{{item.created_at}}</text>
						<text class="gui-list-body-desc gui-color-red" v-if="item.status == 1">已退款</text>
					</view> -->
					<view style="border-bottom: 1px solid #F5F5F5; margin-top: 15rpx; line-height: 48rpx;">
						<view
							style="border-radius: 50rpx; border: 1px solid #A6A6A7; width: 80rpx; padding: 5rpx 10rpx; text-align: center;">
							{{item.created_at}}日
						</view>
						<view
							style="display: flex; align-items: center; justify-content: space-between; margin-left: 20rpx;">
							<view style="margin-top: 10rpx; max-width: 70%;">{{item.wallet_type}}</view>
							<view style="font-weight: bold;">金额：{{item.wallet_pay}}</view>
						</view>
						<view
							style="display: flex; align-items: center; justify-content: space-between; color: #7C7C7C; margin-left: 20rpx;">
							<view>{{item.pay_type}}{{item.wallet_good?'（' + item.wallet_good + '）':''}}
							</view>
							<!--  v-if="item.status == 1" -->
							<view v-if="item.status == 1" style="color: red;">已退款</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<menuBar menu_index="3" />
	</view>
</template>

<script>
	import menuBar from './menu_bar.vue';
	export default {
		components:{
			menuBar
		},
		data() {
			return {
				actionSheetItems: [{
						id: 0,
						name: '优惠券',

					},
					{
						id: 1,
						name: "卡包",

					}
				],
				msg_text: '加载中...',
				action_type: '优惠券',
				dt_val: '请选择具体日期',
				expenses_list: [], //费用列表
			}
		},
		created() {
			console.log("record->created");
			const today = new Date();
			const year = today.getFullYear(); // 获取年份
			const month = today.getMonth() + 1; // 获取月份，记得加1
			this.dt_val = year + '-' + month

			this.get_coupon_log();

		},
		methods: {
			info(id) {
				uni.navigateTo({
					url: '/pages/card/order_info?id=' + id
				})
			},
			query_change(item) {
				this.action_type = item.name;
			},
			confirm2: function(res) {
				console.log(res);
				this.dt_val = res[0] + '-' + res[1];
			},
			get_coupon_log() {
				var self = this
				this.msg_text = "加载中...";
				this.$boya.NPost("/app/card_bag/get_coupon_log", {
					type: this.action_type,
					date: this.dt_val
				}, function(res) {
					uni.hideLoading();
					console.log('hhhhhhhhh: ', res);
					if (res.data.length > 0) {
						let list = res.data
						for (var i = 0; i < list.length; i++) {
							if (list[i].created_at) {
								let timeStr = list[i].created_at
								let day = timeStr.substr(8, 2); // 从第9个字符开始截取，截取2个字符，即天数部分
								list[i].created_at = day
							}
						}
						self.expenses_list = list.reverse();
						console.log('shuju: ', expenses_list);
					} else {
						self.msg_text = "无记录";
					}
				});
			},
		}
	}
</script>

<style>
	.toubu {
		display: flex;
		align-items: center;
		background-color: white;
		justify-content: space-evenly;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #ccc;
	}

	.shenbao>view {
		/* width: 100%; */
		text-align: center;
		margin: 10rpx 0rpx;
		height: 45rpx;
		line-height: 45rpx;
		padding: 10rpx 38rpx;
		font-size: 34rpx;
		/* font-weight: bold; */
		border-radius: 20rpx;
	}

	.this_bg {
		background-color: #ECF5FF;
		color: #4CA6FF;
		box-shadow: 6rpx 8rpx 10rpx #ccc;
		border: 1px solid #D9ECFF;
	}

	.defu_bg {
		background-color: white;
		border: 1px solid #D9ECFF;
	}
</style>